<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 300px;
      height: 200px;
      border: 1px solid #ccc;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      display: none;
    }

    .green {
      background-color: green;
    }

    .red {
      background-color: red;
    }

    .top {
      position: relative;
      height: 10%;
      padding: 10px;
      background: pink;
    }

    .top::after {
      position: absolute;
      content: 'x';
      display: block;
      width: 20px;
      height: 20px;
      background-color: #ccc;
      text-align: center;
      line-height: 20px;
      border-radius: 50%;
      /* left: -20px;
      top: -10px; */
      left: 282px;
      top: 0
    }

    .content {
      height: 60%;
      display: flex;
      justify-content: center;
      align-items: center;
      /* background-color: red; */
    }

    .content p {
      font-size: 20px;
    }

    .btn {
      width: 100%;
      height: calc(20%-20px);
      background-color: orange;
      color: #fff;
      font-size: 16px;
      overflow: hidden;
    }

    .cancel,
    .ok {
      float: right;
      margin: 10px 20px;
    }
  </style>
</head>

<body>
</body>
<script>
  const Tip = (function () {
    class Tip {
      constructor() {
        this.ele = document.createElement('div')
        this.ele.className = 'box'
        this.callback = function () {
        }
        document.body.appendChild(this.ele)
        this.bindEvent()
      }
      // 设置内容及样式
      setTip (option) {
        this.ele.innerHTML = `
      <div class="top">${option.title}</div>
      <div class="content">
        <p>${option.txt}</p>
      </div>
      <div class="btn">
        <button class="cancel">取消</button><button class="ok">确认</button>
      </div>
      `
        this.ele.style.display = 'block'
        document.querySelector('.top').style.backgroundColor = option.color
      }
      // 2. 绑定各种事件
      bindEvent (e) {
        this.ele.addEventListener('click', e => {
          const target = e.target
          if (target.className === 'top') {
            this.ele.style.display = 'none'
          }
          if (target.className === 'cancel') {

            this.callback(false)
            // console.log(this.callback)
            this.ele.style.display = 'none'
          }
          if (target.className === 'ok') {
            // alert('点击了ok')
            this.ele.style.display = 'none'
            this.callback(true)
          }
        })
      }
    }
    this.instance = null
    return function singleTon (option, cb) {
      // 实例化只有第一次执行
      if (!instance) instance = new Tip()
      // 底下的代码每次都会执行

      instance.callback = cb || function () { }
      instance.setTip(option)
      return instance
    }
  })()
  new Tip({
    title: '失败',
    type: 'success',
    color: 'yellow',
    txt: '成功'
  }, res => { console.log('00000', res) })
  // new Tip('error', '请求失败')
</script>

</html>